<template>
	<!-- 支收明细 -->
	<scroll-view scroll-y class="scrollSty" @scrolltolower="scrolltolowerFnc">
		<view class="disbursementDetail-main">
			<!-- 搜索 -->
			<view class="searchPage-input">
				<uni-search-bar
					radius="50"
					v-model="storeIncomeQuery.keyword"
					style="flex: 1"
					placeholder="请输入变更内容搜索"
					clearButton="always"
					cancelButton="none"
					@confirm="search"
					@cancel="search"
					@clear="getclear"
				/>
				<text class="searchPage-title" @click="search">搜索</text>
			</view>

			<view class="dateSearch" @click="show = true">
				<uni-icons type="calendar" size="18" color="#666" style="margin-right: 3px"></uni-icons>
				筛选时间：{{ dateVal ? formatDate(dateVal) : '选择筛选时间' }}
				<text class="closeSty" @click.stop="closeTime">清除</text>
			</view>

			<view class="disbursement-content" v-if="storeIncomeList.length > 0">
				<view class="disbursement-item" v-for="(item, index) in storeIncomeList" :key="item.id">
					<view class="disbursement-left">
						<view class="name">
							{{ item.memo }}
						</view>
						<view class="des">
							<text style="padding-right: 5px">变更余额：￥{{ formatAmounts(item.before) }}</text>
							<text>目前余额：￥{{ formatAmounts(item.after) }}</text>
						</view>
						<view class="time">
							{{ formatTimestamps(item.createtime) }}
						</view>
					</view>
					<view class="disbursement-rigth" :class="[Number(item.money) > 0 ? 'add' : 'reduction']">{{ item.money }}元</view>
				</view>
			</view>

			<!-- 明细内容 -->
			<view class="disbursementDetailList" v-else>
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>

			<u-datetime-picker :show="show" v-model="dateVal" mode="date" @confirm="getconfirm" @close="getclose"></u-datetime-picker>
		</view>
	</scroll-view>
</template>

<script>
import { storeIncome } from '../../../api/flashManage/index.js';
import { formatAmount, formatTimestamp } from '../../../utils/tools.js';
export default {
	data() {
		return {
			storeIncomeList: [],
			storeIncomeQuery: {
				page: 1,
				limit: 10,
				keyword: '',
				type: ''
			},
			show: false,
			dateVal: ''
		};
	},
	onLoad() {
		this.storeIncomeQuery.type = this.$store.state.storeType;
		this.getstoreIncome();
	},
	methods: {
		async getstoreIncome() {
			try {
				console.log(this.dateVal);
				if (this.dateVal) {
					this.storeIncomeQuery.date = this.formatDate(this.dateVal);
				}
				const resData = await storeIncome(this.storeIncomeQuery);
				let list = resData.data.data || [];
				const shopListData = [...(this.storeIncomeList || []), ...list];
				this.storeIncomeList = shopListData;
			} catch (e) {
				throw Error(e);
			}
		},

		search() {
			this.storeIncomeQuery.page = 1;
			this.storeIncomeList = [];
			this.getstoreIncome();
		},

		getclear() {
			this.storeIncomeQuery.keyword = '';
			this.getstoreIncome();
		},

		formatTimestamps(val) {
			return formatTimestamp(val);
		},

		formatAmounts(val) {
			return formatAmount(Number(val));
		},

		getconfirm(val) {
			this.show = false;
			this.dateVal = val.value;
			this.storeIncomeQuery.page = 1;
			this.storeIncomeList = [];
			this.getstoreIncome();
		},

		getclose() {
			this.show = false;
		},

		formatDate(dates) {
			if (!dates) {
				return '';
			}
			const date = new Date(dates);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		},
		
		// 触底加载
		scrolltolowerFnc() {
			this.storeIncomeQuery.page++;
			this.getstoreIncome();
		},
		
		closeTime(){
			if(!this.dateVal){
				return uni.showToast({
					title:'请选择时间',
					icon:'none'
				})
			}
			this.dateVal = '';
			this.getstoreIncome();
		}
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
	display: flex;
	flex-direction: column;
}
</style>

<style scoped lang="scss">
.scrollSty {
	flex: 1;
	overflow: scroll;
}
.disbursementDetail-main {
	.searchPage-input {
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: #fff;
		.searchPage-title {
			margin-right: 20rpx;
			color: #444;
		}
	}

	.dateSearch {
		font-size: 13px;
		color: #666;
		height: 40px;
		line-height: 40px;
		box-sizing: border-box;
		padding: 0px 10px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #fff;
		.closeSty{
			color: #2979ff;
			margin-left: 10px;
		}
	}

	.disbursement-content {
		.disbursement-item {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 10rpx;
			background-color: #fff;
			font-size: 26rpx;
			color: #444;
			border-bottom: 1px #f3f3f3 solid;
			.disbursement-left {
				.name {
					font-weight: bold;
					font-size: 28rpx;
				}

				.des {
					margin: 10rpx 0px;
					font-size: 12px;
				}

				.time {
					font-size: 12px;
					color: #999;
				}
			}

			.disbursement-rigth {
				font-size: 28rpx;
				font-weight: bold;
			}

			.add {
				color: #07c160;
			}

			.reduction {
				color: #e43927;
			}
		}
	}
}
</style>
